
<h1><img src="img/icons/chart.png" alt="" /> Charts</h1>

<div class="bloc">
    <div class="title">
        Charts
        <div class="tabs">
            <a href="#line">Line</a>
            <a href="#area">Area</a>
            <a href="#pie">Pie</a>
            <a href="#bar">Bar</a>
        </div>
    </div>
    <div class="content" id="line">
        <table class="graph type-line dots tips">
            <caption>2009 Employee Sales by Department</caption> 
            <thead> 
                    <tr> 
                            <td></td> 
                            <th scope="col">food</th> 
                            <th scope="col">auto</th> 
                            <th scope="col">household</th> 
                            <th scope="col">furniture</th> 
                            <th scope="col">kitchen</th> 
                            <th scope="col">bath</th> 
                    </tr> 
            </thead> 
            <tbody> 
                    <tr> 
                            <th scope="row">Mary</th> 
                            <td>190</td> 
                            <td>160</td> 
                            <td>40</td> 
                            <td>120</td> 
                            <td>30</td> 
                            <td>70</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Tom</th> 
                            <td>3</td> 
                            <td>40</td> 
                            <td>30</td> 
                            <td>45</td> 
                            <td>35</td> 
                            <td>49</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Brad</th> 
                            <td>10</td> 
                            <td>180</td> 
                            <td>10</td> 
                            <td>85</td> 
                            <td>25</td> 
                            <td>79</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Kate</th> 
                            <td>40</td> 
                            <td>80</td> 
                            <td>90</td> 
                            <td>25</td> 
                            <td>15</td> 
                            <td>119</td> 
                    </tr>		
            </tbody> 
        </table>
    </div>
    <div class="content" id="area">
        <table class="graph type-area">
            <caption>2009 Employee Sales by Department</caption> 
            <thead> 
                    <tr> 
                            <td></td> 
                            <th scope="col">food</th> 
                            <th scope="col">auto</th> 
                            <th scope="col">household</th> 
                            <th scope="col">furniture</th> 
                            <th scope="col">kitchen</th> 
                            <th scope="col">bath</th> 
                    </tr> 
            </thead> 
            <tbody> 
                    <tr> 
                            <th scope="row">Mary</th> 
                            <td>190</td> 
                            <td>160</td> 
                            <td>40</td> 
                            <td>120</td> 
                            <td>30</td> 
                            <td>70</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Tom</th> 
                            <td>3</td> 
                            <td>40</td> 
                            <td>30</td> 
                            <td>45</td> 
                            <td>35</td> 
                            <td>49</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Brad</th> 
                            <td>10</td> 
                            <td>180</td> 
                            <td>10</td> 
                            <td>85</td> 
                            <td>25</td> 
                            <td>79</td> 
                    </tr> 
                    <tr> 
                            <th scope="row">Kate</th> 
                            <td>40</td> 
                            <td>80</td> 
                            <td>90</td> 
                            <td>25</td> 
                            <td>15</td> 
                            <td>119</td> 
                    </tr>		
            </tbody> 
        </table>
    </div>
    <div class="content" id="pie">
        <table class="graph type-pie tips">
                <caption>2009 Employee Sales by Department</caption>
                <thead>
                        <tr>
                                <td></td>
                                <th scope="col">food</th>
                                <th scope="col">auto</th>
                                <th scope="col">household</th>
                                <th scope="col">furniture</th>
                                <th scope="col">kitchen</th>
                                <th scope="col">bath</th>
                        </tr>
                </thead>
                <tbody> 
                        <tr> 
                                <th scope="row">Mary</th> 
                                <td>190</td> 
                                <td>160</td> 
                                <td>40</td> 
                                <td>120</td> 
                                <td>30</td> 
                                <td>70</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Tom</th> 
                                <td>3</td> 
                                <td>40</td> 
                                <td>30</td> 
                                <td>45</td> 
                                <td>35</td> 
                                <td>49</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Brad</th> 
                                <td>10</td> 
                                <td>180</td> 
                                <td>10</td> 
                                <td>85</td> 
                                <td>25</td> 
                                <td>79</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Kate</th> 
                                <td>40</td> 
                                <td>80</td> 
                                <td>90</td> 
                                <td>25</td> 
                                <td>15</td> 
                                <td>119</td> 
                        </tr>		
                </tbody> 
        </table>
    </div>
    <div class="content" id="bar">
        <table class="graph type-bar">
                <caption>2009 Employee Sales by Department</caption>
                <thead>
                        <tr>
                                <td></td>
                                <th scope="col">food</th>
                                <th scope="col">auto</th>
                                <th scope="col">household</th>
                                <th scope="col">furniture</th>
                                <th scope="col">kitchen</th>
                                <th scope="col">bath</th>
                        </tr>
                </thead>
                <tbody> 
                        <tr> 
                                <th scope="row">Mary</th> 
                                <td>190</td> 
                                <td>160</td> 
                                <td>40</td> 
                                <td>120</td> 
                                <td>30</td> 
                                <td>70</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Tom</th> 
                                <td>3</td> 
                                <td>40</td> 
                                <td>30</td> 
                                <td>45</td> 
                                <td>35</td> 
                                <td>49</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Brad</th> 
                                <td>10</td> 
                                <td>180</td> 
                                <td>10</td> 
                                <td>85</td> 
                                <td>25</td> 
                                <td>79</td> 
                        </tr> 
                        <tr> 
                                <th scope="row">Kate</th> 
                                <td>40</td> 
                                <td>80</td> 
                                <td>90</td> 
                                <td>25</td> 
                                <td>15</td> 
                                <td>119</td> 
                        </tr>		
                </tbody> 
        </table>
    </div>
</div>
